<template>
  <div class="client-menu" @touchmove.stop.prevent>
    <ul class="item-list">
      <li class="item" v-for="(item, index) in itemList" v-if="item.isShow !== false">
        <router-link v-if="item.isLink !== false" class="item-link" :to="item.to">{{ item.title }}</router-link>
        <span v-if="item.isLink === false" class="item-link" @click="menuItemSelected(item)">{{ item.title }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {

    props:{
      itemList: {
        type: Array,
        require: true
      }
    },

    methods: {
      menuItemSelected (item) {
        this.$emit('select-menu', item)
      }
    },

    components:{

    },

    mounted() {
      console.log(this.itemList)
    }
  }
</script>

<style lang="less">
    .client-menu {
      width: 100%;
      background-color: white;

      .item-list {
      width: 100%;
      display: flex;
      border-top: 1px solid #eee;;

      li.item {
        flex: 1;
        @item-size:40px;

        height: @item-size;
        line-height: @item-size;

        text-align: center;
        list-style: none;
      }

      .item-link{
        display: block;
        color: #35ADFF;
      }

      li.item:not(:first-child) {
        border-left: 1px solid #eee;;
      }
      }

    }
</style>
